<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 这个里面去放置当前界面的样式 -->
  <style>
    /* 所有标签初始化自带间距 */
    *{
      margin: 0;
      padding: 0;
    }
    
    body{
      background: rgb(14,20,75);  /* 给整个网页设置背景颜色 */
      color: white; /*设置整个网页的文字颜色为白色*/
    }
    #top{
      display: flex;  /*内部元素可以按照一定规律布局*/
    }
    #bottom{
      display: flex;
    }
    .flex2{
      flex: 2;
      height: 300px;
    }
    .flex3{
      flex: 3;
      height: 300px;
    }

    /* 标题布局 */
    #title{
      display: flex;
      justify-content: space-between ;  /*内部元素在水平方向上的布局*/  /*space-between : ；两端*/
      padding: 15px;  /*设置间距 使其不贴边*/
      color: rgb(165 194 255);
    }

    #top div{
      position: relative;
      margin: 15px;  /*元素和元素之间的距离*/
      box-sizing: border-box;
      padding: 15px; /*元素和内部内容的间距*/
    }
    #top div:hover{  /*鼠标移动到top上面的div，出现阴影*/
      box-shadow: 0px 0px 10px rgba(255,255,255,0.5);
    }
    #bottom div{
      position: relative;
      margin: 15px;  /*元素和元素之间的距离*/
      box-sizing: border-box;
      padding: 15px; /*元素和内部内容的间距*/
    }
    #bottom>div:hover{  /*鼠标移动到bottom上面的div，出现阴影*/
      box-shadow: 0px 0px 10px rgba(255,255,255,0.5);
    }
   
    #top>div::before{
      position: absolute;
      z-index: 1;
      content: '';
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: linear-gradient(to left, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) left top no-repeat,
                  linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) left top no-repeat,
                  linear-gradient(to left, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) right top no-repeat,
                  linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) right top no-repeat,
                  linear-gradient(to left, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) left bottom no-repeat,
                  linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) left bottom no-repeat,
                  linear-gradient(to left, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) right bottom no-repeat,
                  linear-gradient(to left, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) right bottom no-repeat;
      background-size: 1px 20px,20px 1px,1px 20px, 20px 1px; 
      
    }

    #bottom div::before{
      position: absolute;
      z-index: 1;
      content: '';
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: linear-gradient(to left, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) left top no-repeat,
                  linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) left top no-repeat,
                  linear-gradient(to left, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) right top no-repeat,
                  linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) right top no-repeat,
                  linear-gradient(to left, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) left bottom no-repeat,
                  linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) left bottom no-repeat,
                  linear-gradient(to left, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) right bottom no-repeat,
                  linear-gradient(to left, rgba(255,255,255,0.3), rgba(255,255,255,0.3)) right bottom no-repeat;
      background-size: 1px 20px,20px 1px,1px 20px, 20px 1px; 
      
    }
    #top #x{
      padding: 0;
    }
   
    
  </style>
</head>
<body>
  <!-- 标题部分 -->
  <div id="title">
    <!-- 标题标签 -->
    <h2>晋中·自动化</h2>
    <!-- 放置时间 -->
    <time>2023-03-22 09:00:00</time>
  </div>
  <!-- 这个用来放置整体 -->
  <div>
    <!-- 上面一整部分 -->
    <div id="top">
      <div class="flex2" id="top-1"></div>
      <div class="flex3" id="x">

      </div>
      <div class="flex2">2</div>
    </div>
    <!-- 下面部分 -->
    <div id="bottom">
      <div class="flex2">2</div>
      <div class="flex3">3</div>
      <div class="flex2">2</div>
    </div>
  </div>
  <!-- 数据可视化的文件 -->
  <script src="echarts.min.js"></script>  
  <!-- 数据可视化3D的文件 -->
	<script src="echarts-gl.min.js"></script>
  <!-- 生成世界地图的文件 -->
	<script src="world.js"></script>
  <!-- 辅助工具文件 -->
	<script src="jquery.js"></script>
  <script>

    // 获取时间标签
    var t = document.querySelector('time')
    // 获取当前时间
    // new Date().toLocaleTimeString()   11:08:20
    // new Date().toLocaleDateString().replaceAll('/','-')  2023-3-22
    t.innerText = new Date().toLocaleDateString().replaceAll('/','-') +' '+ new Date().toLocaleTimeString()

    // 定时器： 每一秒 执行一次
    setInterval(function(){
      t.innerText = new Date().toLocaleDateString().replaceAll('/','-') +' '+ new Date().toLocaleTimeString()
    },1000)
  </script>
  <script>
    var myChart  = echarts.init(document.querySelector('#x'))
      $.getJSON('flights.json', function (data) {
    function getAirportCoord(idx) {
      return [data.airports[idx][3], data.airports[idx][4]];
    }
    var routes = data.routes.map(function (airline) {
      return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
    });
    myChart.setOption({
      geo3D: {
        map: 'world',
        shading: 'realistic',
        silent: true,
        // environment: 'red',
        realisticMaterial: {
          roughness: 0.8,
          metalness: 0
        },
        postEffect: {
          enable: true
        },
        groundPlane: {
          show: false
        },
        light: {
          main: {
            intensity: 1,
            alpha: 30
          },
          ambient: {
            intensity: 0
          }
        },
        viewControl: {
          distance: 70,
          alpha: 89,
          panMouseButton: 'left',
          rotateMouseButton: 'right'
        },
        itemStyle: {
          color: '#000'
        },
        regionHeight: 0.5
      },
      series: [
        {
          type: 'lines3D',
          coordinateSystem: 'geo3D',
          effect: {
            show: true,
            trailWidth: 1,
            trailOpacity: 0.5,
            trailLength: 0.2,
            constantSpeed: 5
          },
          blendMode: 'lighter',
          lineStyle: {
            width: 0.2,
            opacity: 0.05
          },
          data: routes
        }
      ]
    });
    window.addEventListener('keydown', function () {
      myChart.dispatchAction({
        type: 'lines3DToggleEffect',
        seriesIndex: 0
      });
    });
  });
	</script>
  <script>
    //  获取元素
    var top1 = document.querySelector('#top-1')
    // 初始化容器
    var myChart1 = echarts.init(top1)
    // 给容器配置
    myChart1.setOption({
      title: {  // 图形标题
        text: '自动化就业率',
        textStyle: {
          color: 'rgb(165 194 255)' // 标题的颜色
        }
      },
      xAxis: {
        type: 'category',
        axisLine: { // 轴线
          show: false
        },
        axisTick: {
          show: false
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        show: false,
        type: 'value'
      },
      // 调整图形与周边的距离
      grid: {
        left: '-5%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          barWidth: '10px', //柱子宽度
          itemStyle: {  // 柱子样式
            color: {  // 柱子的颜色是线性渐变
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgb(79,121,252)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
          }
        }
      ]
    })
  </script>
</body>
</html>